<template>
    <div class="activity-container">
        <div class="filter-bar">
            <el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                @change="handleDateChange">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-refresh" @click="refreshList">刷新</el-button>
        </div>

        <el-timeline>
            <el-timeline-item v-for="(activity, index) in activityList" :key="index" :timestamp="activity.time"
                :type="activity.status ? 'primary' : 'danger'">
                <el-card class="activity-card">
                    <div class="activity-info">
                        <div class="activity-title">
                            <span>{{ activity.title }}</span>
                            <el-tag :type="activity.status ? 'success' : 'danger'" size="small">
                                {{ activity.status ? '成功' : '失败' }}
                            </el-tag>
                        </div>
                        <div class="activity-detail">
                            <div class="detail-item">
                                <i class="el-icon-location"></i>
                                <span>IP地址：{{ activity.ip }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="el-icon-monitor"></i>
                                <span>设备信息：{{ activity.device }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="el-icon-odometer"></i>
                                <span>操作系统：{{ activity.os }}</span>
                            </div>
                            <div class="detail-item">
                                <i class="el-icon-chrome"></i>
                                <span>浏览器：{{ activity.browser }}</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-timeline-item>
        </el-timeline>

        <div class="no-data" v-if="activityList.length === 0">
            <el-empty description="暂无登录记录"></el-empty>
        </div>

        <div class="pagination-container" v-if="total > 0">
            <el-pagination background @current-change="handleCurrentChange" :current-page="currentPage"
                :page-size="pageSize" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            dateRange: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            currentPage: 1,
            pageSize: 10,
            total: 0,
            activityList: []
        };
    },
    created() {
        this.getActivityList();
    },
    methods: {
        formatDate(date) {
            const d = new Date(date);
            const year = d.getFullYear();
            const month = (d.getMonth() + 1).toString().padStart(2, '0');
            const day = d.getDate().toString().padStart(2, '0');
            const hour = d.getHours().toString().padStart(2, '0');
            const minute = d.getMinutes().toString().padStart(2, '0');
            const second = d.getSeconds().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
        },
        handleDateChange() {
            this.currentPage = 1;
            this.getActivityList();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getActivityList();
        },
        refreshList() {
            this.currentPage = 1;
            this.getActivityList();
        },
        getActivityList() {
            this.loading = true;
            // 实际项目中这里应该调用获取登录日志的API
            setTimeout(() => {
                // 模拟数据
                const mockData = [];
                for (let i = 0; i < 10; i++) {
                    const date = new Date();
                    date.setDate(date.getDate() - i);

                    mockData.push({
                        id: i + 1,
                        title: `登录系统 ${i % 3 === 0 ? '(异常登录)' : ''}`,
                        time: this.formatDate(date),
                        ip: `192.168.1.${Math.floor(Math.random() * 255)}`,
                        device: i % 2 === 0 ? 'PC端' : '移动端',
                        os: i % 3 === 0 ? 'Windows 10' : (i % 3 === 1 ? 'macOS' : 'Android'),
                        browser: i % 4 === 0 ? 'Chrome' : (i % 4 === 1 ? 'Firefox' : (i % 4 === 2 ? 'Safari' : 'Edge')),
                        status: i % 5 !== 0 // 模拟部分登录失败
                    });
                }

                this.activityList = mockData;
                this.total = 35; // 模拟总数
                this.loading = false;
            }, 600);
        }
    }
}
</script>

<style lang="scss" scoped>
.activity-container {
    padding: 10px 0;

    .filter-bar {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .el-date-editor {
            margin-right: 15px;
        }
    }

    .el-timeline {
        padding-left: 0;
    }

    .activity-card {
        .activity-info {
            .activity-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10px;
                font-size: 16px;
                font-weight: bold;
            }

            .activity-detail {
                font-size: 14px;
                color: #606266;

                .detail-item {
                    margin-bottom: 5px;
                    display: flex;
                    align-items: center;

                    i {
                        margin-right: 8px;
                        color: #409EFF;
                    }
                }
            }
        }
    }

    .no-data {
        padding: 30px 0;
    }

    .pagination-container {
        margin-top: 20px;
        text-align: center;
    }
}
</style>